<template>
  <div>
    <input
      @input="onInput"
      v-model.trim="doctorName"
      placeholder="输入关键字搜索"
    />
    <TabularData :result="this.result" @open="onOpen" />
    <DetailPage
      :id="this.id"
      :records="records"
      @off="onOff"
      v-show="openDetailPage"
    />
  </div>
</template>
<script>
import DetailPage from "./components/DetailPage.vue";
import TabularData from "./components/TabularData.vue";
export default {
  components: { TabularData, DetailPage },
  data() {
    return {
      id: 0,
      openDetailPage: "",
      doctorName: "",
      records: [
        {
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
    };
  },
  created() {
    // 这种事先未在 data 中定义，后续添加的数据，不支持响应式
    this.result = this.records;

    // 小技巧：挂载到window上，方便在浏览器控制台中调试
    window.app = this
  },
  methods: {
    onOff() {
      this.openDetailPage = "";
    },
    onOpen(id) {
      this.openDetailPage = "true";
      this.id = id;

      console.log(typeof this.id);
    },

    onInput() {
      // 既然 result 不是响应式数据，那为什么这个案例效果没问题？
      // 因为 doctorName 是响应式数据，在触发 onInput 函数的时候，doctorName 一直在变，所以，就会去驱动视图更新
      // 又因为 视图更新是异步的 所以 onInput 的代码执行比视图更新更早，既 result 数据的修改比视图更新更早
      // 又因为 视图更新是基于 最新的 所有的 数据 去 编译模板 生成虚拟DOM，然后进行DIFF算法比对，从而更新视图，所以在 编译模板时 也是基于最新的 result 去生成的，因为在 TabularData 组件中列表是这样渲染的（v-for="(v, i) of result"）
      if (this.doctorName === "") {
        this.result = this.records;
      } else {
        // this.result = this.records.filter((v) => v.doctor === this.doctorName);
        this.result = this.records.filter((v) =>
          v.doctor.startsWith(this.doctorName)
        );
      }
    },
  },
};
</script>
